<template>
  <div class="note-card" :style="{ backgroundColor: messageColors[message.color] }">
    <div class="header">
      <div class="header-left">{{ dayjs(+message.created_at).format('YYYY.MM.DD HH:mm') }}</div>
      <div class="header-right">{{ tags[message.tag] }}</div>
    </div>
    <div class="content" @click="$emit('openSidebar', message)">
      {{ message.content }}
    </div>
    <div class="footer">
      <div class="footer-left">
        <span class="iconfont icon-aixin" :class="{ active: isLike }" @click="handleLike"></span>
        <span>{{ message.likes_num }}</span>
        <span class="iconfont icon-liuyan"></span>
        <span>{{ message.comments_num }}</span>
      </div>
      <div class="footer-right">{{ message.author }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { tags, messageColors } from './Wall.vue'
import type { PropType } from 'vue'
import type { MessageType } from '../store/messages'
import { useMessagesStore } from '../store/messages'
import { useUserStore } from '../store/user'
import dayjs from 'dayjs'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

export default defineComponent({
  props: {
    message: {
      type: Object as PropType<MessageType>,
      required: true
    }
  },
  emits: ['openSidebar'],
  setup(props) {
    const userStore = useUserStore()
    const messagesStore = useMessagesStore()

    // 计算属性 isLike：如果当前登录用户的点赞列表中包含当前展示的留言的id，则小红心显示为红色
    const isLike = computed(() => {
      return userStore.user.likes.includes(props.message.message_id!)
    })

    const handleLike = async () => {
      if (!userStore.user.isLogin) {
        ElMessage({
          showClose: true,
          message: '请登录之后再进行操作',
          type: 'warning',
        })
        return
      }
      const response = await messagesStore.handleLike({
        username: userStore.user.username,
        message_id: props.message.message_id!,
        isLike: isLike.value
      })
      if (response) {
        if (isLike.value) {
          ElMessage({
            showClose: true,
            message: '感谢你的小红心💗',
            duration: 1000
          })
        } else {
          ElMessage({
            showClose: true,
            message: '呜呜呜🥹',
            duration: 1000
          })
        }
      } else {
        ElMessage({
            showClose: true,
            message: '登录已过期，请重新登录',
            duration: 1000,
            type: 'warning'
          })
      }
    }

    return { tags, dayjs, messageColors, isLike, handleLike }
  }
})
</script>

<style lang="less" scoped>
.note-card {
  width: 288px;
  height: 240px;
  background: rgba(168, 237, 138, 0.3);
  padding: 10px 20px 16px;
  box-sizing: border-box;
  margin: 6px 6px;
  transition: all .3s;
  border-radius: 10px;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
  }

  .header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #949494;
  }

  .content {
    margin: 19px 0 18px;
    width: 248px;
    height: 140px;
    text-align: justify;
    line-height: 22px;
    cursor: pointer;
  }

  .footer {
    display: flex;
    justify-content: space-between;

    .footer-left {

      span {
        color: #7E7E7E;
        margin: 0 2px;

        &.icon-aixin {
          transition: all .3s;
          cursor: pointer;

          &.active {
            color: #f67770;
          }

          &:hover {
            color: #f67770;
          }
        }
      }
    }

    .footer-right {
      font-weight: 700;
    }
  }
}
</style>